<template>
   <h4>去拿子模块中的数据</h4>
   <h1>app-appName:{{ $store.state.app.appName }}</h1>
   <h1>user-userInfo:{{ $store.state.user.userInfo }}</h1>
   <!-- 子模块的 计算属性 可以直接拿( $store.getters.appNameLength ), 但如果子模块加了命名空间就不能这样了-->
   <h1>appNameLength:{{ $store.getters.appNameLength }}</h1>

   <!-- 如果子模块没有命名空间，提交方法时，会提交全部同名的方法。有命名空间，需要在 方法前面加上 '模块名/'  -->
   <button @click="$store.commit('app/changeAppName','hello')">修改AppName</button>

   <button @click="changeAppName('不知啥名字')">mapMutations修改AppName</button>
   
   <button @click="asyncChangeName('async修改')">mapActions修改AppName</button>


   <BasicLayout></BasicLayout>
</template>

<script >
// 可以使用 @路径别名，找路径会比较方便，后续如果路径发送变化，只需修改一处即可
import BasicLayout from '@/layout/basic-layout.vue'
import { mapState,mapGetters, mapMutations, mapActions } from 'vuex';

export default {

   components: {
      BasicLayout,
   },
   computed:{
      // ...mapState(['appName','userInfo'])  // 这样拿不到 undefined
      ...mapState('app',['appName']),  // 映射一个appName到组件的appName上，指向的是app模块下的 appName
      ...mapState('user',['userInfo']),
      ...mapGetters('app',['appNameLength']),

   },

   methods:{
      // mapMutations 需要在方法里面使用
      ...mapMutations('app',['changeAppName']),
      ...mapActions('app',['asyncChangeName'])
   },

 
   mounted(){
      // console.log(this.$store,333333);
   }
}

</script>

 